<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        svg * {
            fill: none;
            stroke: currentColor;
        }
        .sunrise  {color: #f037a5; background-color: #f8c72c;}
        /* Themes */
        .intro    {display: block;}
        .sunrise  {color: #f037a5; background-color: #f8c72c;}
        .matrix   {color: #86e0c4; background-color: #181f21;}
        .electric {color: #78C9DB; background-color: #E4175B;}
        .night    {color: #D3D679; background-color: #316BD2;}
    </style>
</head>
<body>
<object id="obt" data="obturateur.svg" type="image/svg+xml" style="width: 100%; max-height: 250px;"></object>
<div class="sunrise">
    <div id="polaroid-dynamic" style="width: 30%;margin: 0 auto"></div>

</div>
<div class="electric">

    <div id="hi-dynamic" style="max-width: 300px; margin: auto;"></div>
</div>
<div class="night">
    <div id="synth-dynamic" style="max-width: 400px; margin: auto;"></div>
</div>
<div class="sunrise">
    <div id="test1" style="width: 30%;margin: 0 auto"></div>

</div>
<script src="vivus.min.js"></script>
<script>
    var obt1 = new Vivus('obt', {
        type: 'delayed',
        duration: 150
    });
    var polaroidD = new Vivus('polaroid-dynamic', {
        file: 'polaroid.svg',
        type: 'scenario-sync',
        duration: 10
    });
    var hiD = new Vivus('hi-dynamic', {
        file: 'hi-there.svg',
        type: 'scenario-sync',
        duration: 20,
        start: 'manual'
    });

    var synthD = new Vivus('synth-dynamic', {
        file: 'synth.svg',
        type: 'oneByOne',
        duration: 200,
        start: 'manual',
        animTimingFunction: Vivus.EASE_IN
    });
    var test1 = new Vivus('test1', {
        file: 'test.svg',
        type: 'oneByOne',
        duration: 600,
        start: 'manual',
        animTimingFunction: Vivus.EASE_IN
    });
    setTimeout(function () {
        synthD.play();
        hiD.play();
        test1.play()

    },5000)
    function easeOutBounce (x) {
        var base = -Math.cos(x * (0.5 * Math.PI)) + 1;
        var rate = Math.pow(base,1.5);
        var rateR = Math.pow(1 - x, 2);
        var progress = -Math.abs(Math.cos(rate * (2.5 * Math.PI) )) + 1;
        return (1- rateR) + (progress * rateR);
    }
</script>
</body>
</html>